<template>
	<view>
		<u-popup :show="specsShow" @close="close" mode="bottom" border-radius="22" :safeAreaInsetBottom="false"
			:closeable="true">
			<view class="spec-goods">
				<view class="goods-img">
					<image :src="img" mode="aspectFill" @click="MpreviewImage([img])"></image>
				</view>
				<view class="spec-goods-r">
					<view class="spec-goods-r-price">
						实付 ￥<text>{{ price }}</text>
					</view>
					<view class="spec-goods-r-num">
						<view class="spec-goods-r-num-item">
							<!-- <u-number-box v-model="form.Quantity" :min="1" :max="stock"></u-number-box> -->
							<view class="spec-goods-r-num-item-jian" :style="{background: form.Quantity === 1 ? '#F7F8FA' : '#EBECEE'}" @click="jian">
								<u-icon
								    name="minus"
								    :color="form.Quantity === 1 ? '#c8c9cc' : '#323233'"
								    size="15"
								    bold
								></u-icon>
							</view>
							<view class="spec-goods-r-num-item-input">
								<text>{{form.Quantity}}</text>
							</view>
							<view class="spec-goods-r-num-item-add" :style="{background: form.Quantity === stock ? '#F7F8FA' : '#EBECEE'}" @click="add">
								<u-icon
								    name="plus"
								    :color="form.Quantity === stock ? '#c8c9cc' : '#323233'"
								    size="15"
								    bold
								></u-icon>
							</view>
						</view>
						<text>限购{{stock}}件</text>
					</view>
				</view>
			</view>
			<view class="spec-address" @click="chooseAddress" v-if="info.shippingOptions != 2">
				<view class="spec-address-img">
					<!-- 13*16 -->
					<image :src="ossUrl + '/static/3.png'" mode=""></image>
				</view>
				<view class="spec-address-c">
					<view v-if="form.ShippingAddress === ''">请选择收货地址</view>
					<block v-else>
						<view class="spec-address-c-content">
							<text>{{form.ShippingAddress.userName || ''}}</text>
							<text>
								{{form.ShippingAddress.provinceName || ''}} {{form.ShippingAddress.cityName || ''}}
								{{form.ShippingAddress.countyName || ''}} {{form.ShippingAddress.detailInfo || ''}}
							</text>
						</view>
						<view class="spec-address-c-subTitle" v-if="info.shippingOptions === 3 && FreightPrice">
							<text>运费</text>
							<text style="color: #e4393c;">￥{{FreightPrice || 0}}</text>
						</view>
					</block>


				</view>
				<view class="spec-address-r">
					<image :src="ossUrl + '/static/shopping/ret-icon.png'" mode="widthFix"></image>
				</view>

			</view>

			<view class="userPopupShow-c-list-item spec-people" @click="open" v-if="type == 2">
				<view class="userPopupShow-c-list-item-tx">推荐人</view>
				<image :src="info.reference[userCurrent].head" mode="aspectFill"></image>
				<view class="userPopupShow-c-list-item-name">{{info.reference[userCurrent].nickname}}</view>
				<view class="userPopupShow-c-list-item-friend" v-if="info.reference[userCurrent].Friend === 1">（好友）
				</view>
				<view class="userPopupShow-c-list-item-num">带货{{info.reference[userCurrent].RecentSales}}单</view>
				<view class="spec-address-r">
					<image :src="ossUrl + '/static/shopping/ret-icon.png'" mode="widthFix"></image>
				</view>
			</view>
			<view class="spec-title">颜色分类（{{info.specificationsCount || 0}}）</view>
			<view class="spec-list">
				<view :class="index === current?'spec-list-item spec-list-item-ac':'spec-list-item'"
					v-for="(it,index) in info.specifications" @click="setCurrent(index)">
					<view class="spec-address-img">
						<image :src="it.img" mode="aspectFill"></image>
					</view>
					<view class="spec-list-c">{{it.name || ''}}</view>
					<view class="spec-list-r">
						<view class="spec-list-r-price">￥{{type == 3 ? it.PurchasePrice || '' :  it.price || ''}}</view>
						<view class="spec-list-r-cion" v-if="index != current">
							<u-icon name="arrow-down" color="#A3A3A3" size="14"></u-icon>
						</view>
					</view>
				</view>

			</view>





			<view class="btns-lists">
				<!-- <view class="buutn add-cart">加入购物车</view> -->
				<view class="buutn buy" @click="buyNow">立即支付 ￥<text>{{allPrice}}</text></view>
			</view>

		</u-popup>
		<view class="userPopupShow" v-if="userPopupShow">
			<view class="userPopupShow-mask" @click="closeUserPopup"></view>
			<view class="userPopupShow-c">
				<view class="userPopupShow-close" @click="closeUserPopup">
					<u-icon name="close" color="#909399" size="20"></u-icon>
				</view>
				<view class="userPopupShow-c-list">
					<view class="userPopupShow-c-list-item" v-for="(it,index) in info.reference"
						@click="setUserCurrent(index)">
						<image :src="it.head" mode="aspectFill"></image>
						<view class="userPopupShow-c-list-item-name">{{it.nickname}}</view>
						<view class="userPopupShow-c-list-item-friend" v-if="it.Friend === 1">（好友）</view>
						<view class="userPopupShow-c-list-item-num">带货{{it.RecentSales}}单</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		goodsPay,
		ExpressDeliveryFee
	} from '@/common/http/api.js'
	import Big from 'big.js';
	export default {
		data() {
			return {
				specsShow: false,
				userPopupShow: false,
				info: '',
				type: 1, //1他人 2普通用户 3联创 4联创分销
				business_card_id: '',
				current: 0,
				form: {
					business_card_id: '',
					ProductID: '',
					ShippingAddress: '',
					Quantity: 1,
					type: '',
					specifications_id: '',
					ProductType: ''
				},
				userCurrent: 0,
				FreightPrice: ''
			}
		},
		computed: {
			price() {
				let price = ''
				try {
					if (this.type == 3) {
						price = this.info.specifications[this.current].PurchasePrice
					} else {
						price = this.info.specifications[this.current].price
					}

				} catch (e) {

				}
				return price
			},
			stock() {
				let stock = 0
				try {
					stock = this.info.specifications[this.current].stock
				} catch (e) {

				}
				return stock
			},
			img() {
				let img = 0
				try {
					img = this.info.specifications[this.current].img
				} catch (e) {

				}
				return img
			},
			allPrice() {
				let price = ''
				try {
					let num1 = new Big(this.price);
					let num2 = new Big(this.form.Quantity);
					price = Number(num1.times(num2))
					if(this.FreightPrice) {
						// https://blog.csdn.net/a123456234/article/details/132305810/
						//console.log('Big',Big)
						// let num21 = new Big(0.1);
						// let num22 = new Big(0.2);
						// console.log(0.1 + 0.2); // 0.30000000000000004
						// console.log(num21); // 0.3
						// console.log(Number(num21.plus(num22))); // 0.3
						let num4 = new Big(price);
						let num3 = new Big(this.FreightPrice);
						price = Number(num4.plus(num3))
					}
					//price = Number(this.price) * Number(this.form.Quantity)
					//price = price.toFixed(2)
				} catch (e) {

				}
				return price
			}
		},
		methods: {
			jian(){
				if(this.form.Quantity === 1) return
				this.form.Quantity--
			},
			add(){
				if(this.form.Quantity >= this.stock) return
				this.form.Quantity++
			},
			buyNow() {
				if (this.info.shippingOptions != 2 && this.form.ShippingAddress === '') {
					uni.showToast({duration:3000,
						title: "请选择收货地址",
						icon: 'none'
					})
					return
				}
				let data = {
					...this.form,
					specifications_id: this.info.specifications[this.current].id,
					business_card_id: this.form?.business_card_id ? this.form.business_card_id : undefined,
					ShippingAddress: JSON.stringify(this.form.ShippingAddress)
				}
				console.log('ddd', data)
				uni.showLoading()
				goodsPay(data).then(res => {
					uni.hideLoading()
					//调用微信官方支付接口弹出付款界面,输入密码扣款
					wx.requestPayment({
						timeStamp: String(res.data.timeStamp),
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: res => {
							console.log('支付成功', res);
							uni.showToast({duration:3000,
								title: '支付成功',
								icon: 'none'
							})
							this.close()
						},
						fail: function(err) {
							console.log('支付失败', err);
						}
					})
				})
			},
			setUserCurrent(index) {
				this.userCurrent = index
				this.userPopupShow = false
				this.form.business_card_id = this.info.reference[index].business_card_id
			},
			open() {
				this.userPopupShow = true
			},
			setCurrent(index) {
				this.current = index
				this.form.Quantity = 1
			},
			getFreight(){
				ExpressDeliveryFee({ShippingAddress: this.form.ShippingAddress}).then(res=>{
					if(res.data.type === 1) {
						this.FreightPrice = res.data.Price
					}
				})
			},
			show(info, type, business_card_id) {
				
				
				this.info = info
				this.type = type
				if (this.info.ShippingAddress) {
					console.log('this.info.ShippingAddress', this.info.ShippingAddress)
					let json = ''
					try {
						json = JSON.parse(this.info.ShippingAddress)
					} catch (e) {

					}
					//this.info.ShippingAddress = json
					this.form.ShippingAddress = json
					if(this.info.shippingOptions === 3) {
						this.getFreight()
					}
					console.log('this.info.ShippingAddress', this.info.ShippingAddress)
				}
				this.form.type = type
				// if(type === 4) {
				// 	this.form.type = 3
				// } else if(type === 2 || type === 3) {
				// 	this.form.type = 2
				// } else {
				// 	this.form.type = 1
				// }


				this.form.ProductType = this.info.shippingOptions === 2 ? 2 : 1
				this.form.ProductID = info.id
				this.business_card_id = business_card_id
				if (business_card_id) {
					this.form.business_card_id = business_card_id
				}
				this.form.Quantity = 1
				this.specsShow = true
				if (this.type == 2) {
					this.info.reference.forEach((i, index) => {
						if (i.selected == 1) {
							this.userCurrent = index
							this.form.business_card_id = i.business_card_id
						}
					})
				}
			},
			close() {
				this.specsShow = false
			},
			closeUserPopup() {
				this.userPopupShow = false
			},
			chooseAddress() {
				wx.chooseAddress({
					success: (res) => {
						console.log('收货地址', res);
						// 处理选择成功后的逻辑，如保存地址信息等
						this.form.ShippingAddress = res
						this.getFreight()
					},
					fail: (error) => {
						console.log(error);
						// 处理选择失败后的逻辑
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}
	input {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.spec-goods {
		display: flex;
		padding: 36rpx;
		position: relative;
		border-bottom: 10rpx solid #f5f5f5;

		.goods-img {
			width: 200rpx;
			height: 200rpx;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 14rpx;
			}
		}

		.spec-goods-info {
			margin-left: 17rpx;

			.spec-goods-price {
				color: #FC482F;
				font-size: 46rpx;
				//margin-top: 110rpx;

				text {
					font-size: 28rpx;
				}
			}

			.spec-goods-no {
				color: #999999;
				font-size: 22rpx;
			}
		}

		.spec-goods-r {
			margin-left: 30rpx;
			flex: 1;
			display: flex;
			flex-direction: column;

			.spec-goods-r-price {
				font-size: 40rpx;
				font-weight: bold;
				color: #F75B20;
				flex: 1;
				display: flex;
				align-items: center;

				text {
					font-weight: bold;
					font-size: 65rpx;
				}
			}

			.spec-goods-r-num {
				display: flex;
				align-items: center;

				.spec-goods-r-num-item {
					//transform: scale(0.8) translateX(-20rpx);
					display: flex;
					align-items: center;
					&>view {
						width: 70rpx;
						height: 60rpx;
						background: #EBECEE;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.spec-goods-r-num-item-input {
						margin: 0 10rpx;
					}
				}

				&>text {
					color: #999999;
					font-size: 22rpx;
				}
			}
		}
	}

	.spec-address {
		box-sizing: border-box;
		padding: 20rpx 36rpx;
		display: flex;
		align-items: center;
		border-bottom: 10rpx solid #f5f5f5;

		.spec-address-img {
			width: 13rpx * 2;
			height: 16rpx * 2;

			image {
				width: 100%;
				height: 100%;

			}
		}

		.spec-address-c {
			flex: 1;
			min-width: 0;
			padding: 0 30rpx;

			.spec-address-c-content {

				// margin-bottom: 10rpx;
				text {
					margin-right: 10rpx;
				}
			}

			.spec-address-c-subTitle {
				font-size: 26rpx;

				text {
					margin-right: 10rpx;
				}
			}
		}

		.spec-address-r {
			width: 40rpx;

			image {}
		}
	}

	.spec-title {
		padding: 4rpx 36rpx 7rpx 36rpx;
		color: #000000;
		font-size: 26rpx;
		font-weight: bold;
		padding-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.spec-list {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		overflow-y: scroll;
		height: 500rpx;

		.spec-list-item {
			width: 100%;
			display: flex;
			align-items: center;
			background: #F7F7F7;
			box-sizing: border-box;
			padding: 10rpx 20rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			border: 1rpx solid #F7F7F7;

			.spec-address-img {
				width: 50rpx;
				height: 50rpx;
			}

			.spec-list-c {
				min-width: 0;
				flex: 1;
				padding: 0 30rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 28rpx;
			}

			.spec-list-r {
				display: flex;
				align-items: center;

				.spec-list-r-price {
					font-size: 28rpx;
					color: #A3A3A3;
					margin-right: 30rpx;
				}
			}
		}

		.spec-list-item-ac {
			background: #FFF5F3;
			border: 1rpx solid #E6B59A;

			.spec-list-c {
				color: #E18D6D;
			}

			.spec-list-r-price {
				color: #E18D6D !important;
			}
		}
	}

	.btns-lists {
		display: flex;
		// border-top: 2rpx solid #E1E1E1;
		padding-top: 20rpx;
		padding-bottom: 30rpx;
		align-items: center;
		padding-left: 11rpx;

		.buutn {

			width: 690rpx;
			height: 76rpx;
			text-align: center;
			line-height: 76rpx;
			border-radius: 10rpx;
			color: #FFFFFF;
			font-size: 26rpx;
			margin: 0 auto;

			text {
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.add-cart {
			background: linear-gradient(271deg, #FF940F 0%, #FEC90B 100%);
		}

		.buy {
			background: linear-gradient(271deg, #F6241F 0%, #FC684D 100%);
		}
	}

	.comment-list {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;

		.comment-list-item {
			width: 100%;
			display: flex;
			padding-bottom: 40rpx;

			.comment-list-item-avatar {
				width: 86rpx;
				height: 86rpx;
			}

			.comment-list-item-rig {
				flex: 1;
				min-width: 0;
				margin-left: 22rpx;

				.comment-list-item-rig-header {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 26rpx;

					.comment-list-item-rig-header-l {
						display: flex;
						align-items: center;

						.comment-list-item-rig-header-l-name {
							font-family: PingFang SC;
							font-weight: 600;
							font-size: 28rpx;
							color: #211C1E;
							margin-right: 19rpx;
						}

						image {
							width: 22rpx;
							height: 22rpx;
							margin-right: 33rpx;
						}

						.comment-list-item-rig-header-l-nums {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #211C1E;
							margin-right: 40rpx;

						}

						.comment-list-item-rig-header-l-address {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #211C1E;
						}
					}

					.comment-list-item-rig-header-r {
						display: flex;
						align-items: center;

						image {
							width: 28rpx;
							height: 24rpx;
							margin-right: 8rpx;
						}

						font-family: PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
					}
				}

				.comment-list-item-rig-star {
					display: flex;
					align-items: center;

					.comment-list-item-rig-star-tx {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #727272;
						margin-right: 23rpx;
					}

					.comment-list-item-rig-star-item {
						display: flex;
						align-items: center;

						image {
							margin-right: 9rpx;
							width: 22rpx;
							height: 22rpx;
						}
					}
				}

				.comment-list-item-rig-content {
					background: #F6F7F8;
					border-radius: 0rpx 20rpx 20rpx 20rpx;
					width: 100%;
					box-sizing: border-box;
					padding: 15rpx 25rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #211C1E;
					margin-top: 19rpx;
				}
			}
		}

		.comment-list-item:last-child {
			padding-bottom: 0;
		}
	}

	.createCard {
		width: 690rpx;
		position: fixed;
		bottom: 140rpx;
		left: 30rpx;
		z-index: 9999;
		padding: 30rpx 10rpx;
		border-radius: 50rpx;
		background: rgba(0, 0, 0, 0.7);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		box-sizing: border-box;
	}

	.userPopupShow {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 999999;

		.userPopupShow-mask {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.2);
		}

		.userPopupShow-c {
			width: 600rpx;
			height: fit-content;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			z-index: 2;
			background: white;
			border-radius: 30rpx;
			box-shadow: 0 0 12rpx #e4e4e4;

			.userPopupShow-close {
				display: flex;
				justify-content: flex-end;
				box-sizing: border-box;
				padding-right: 20rpx;
				padding-top: 20rpx;
			}

			.userPopupShow-c-list {
				width: 100%;
				padding: 20rpx;
				height: 620rpx;
				overflow-y: scroll;
				box-sizing: border-box;

			}
		}

	}

	.userPopupShow-c-list-item {
		width: 100%;
		display: flex;
		align-items: center;
		background: #F7F7F7;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		//margin-bottom: 20rpx;
		border-radius: 10rpx;

		image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.userPopupShow-c-list-item-tx {
			font-size: 30rpx;
			margin-right: 20rpx;
		}

		.userPopupShow-c-list-item-name {
			font-size: 28rpx;
		}

		.userPopupShow-c-list-item-friend {
			font-size: 28rpx;
			// color: #A3A3A3;
		}

		.userPopupShow-c-list-item-num {
			flex: 1;
			min-width: 0;
			text-align: right;
			color: #FFC056;
		}
	}

	.spec-people {
		background: white;
		box-sizing: border-box;
		padding: 20rpx 33rpx 20rpx 30rpx;
		border-bottom: 10rpx solid #f5f5f5;
		align-items: center;

		.spec-address-r {
			width: 40rpx;
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				margin-right: 0;
			}
		}
	}

	// .number-box {
	// 	width: 70rpx;
	// 	height: 60rpx;
	// 	background: #ebecee;
	// 	font-size: 32rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	margin: 0 10rpx;
	// 	text-align: center;
	// }
</style>